<template>
  <div style="display: flex; flex-direction: column; flex: 1">
    <div class="ssbox">
      <el-input
        v-model="searchdata.str"
        placeholder="设备名、设备序列号"
        size="medium"
        style="background: none"
      />
      <el-button
        size="medium"
        style="margin-left: 10px"
        type="primary"
        @click="searchfn"
      >
        搜索
      </el-button>
    </div>
    <div ref="Stationsbox" style="flex: 1; position: relative">
      <el-scrollbar
        style="position: absolute; top: 0px; left: 0; right: 0; bottom: 0"
      >
        <div style="background: rgba(255, 255, 255, 0.1)">
          <station-box
            :active-charge-car="activeChargeCar"
            :charge-car="searchdata.ChargeCar"
            :searchfalg="searchfalg"
            :stations="searchdata.Stations"
            @oneChargeCarfn="oneChargeCarfn"
            @setactiveChargeCarfn="setactiveChargeCarfn"
          />
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>
<script>
  import stationBox from './stationBox'

  export default {
    name: 'ChargeSetCar',
    components: {
      stationBox,
    },
    data() {
      return {
        searchdata: { str: '', Stations: [], ChargeCar: [] },
        Stations: [],
        ChargeCar: [],
        loading: '',
        searchfalg: false,
        activeChargeCar: new Set(),
      }
    },
    watch: {},
    mounted() {
      this.getData()
    },

    methods: {
      getData() {
        this.loading = this.$loading({
          target: this.$refs.Stationsbox,
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(255,255,255,0.1)',
        })
        Promise.all([
          this.$z.$axios.post('/Station'),
          this.$z.cstaaxios('/ChargeCarSearch', {}, 1000),
        ]).then((datas) => {
          let { data } = datas[0]
          this.Stations = data
          this.ChargeCar = datas[1]
          this.searchfn()
          this.loading.close()
        })
      },
      async searchfn() {
        this.activeChargeCar.clear()
        this.$emit('setChargeCar', Array.from(this.activeChargeCar))
        if (this.searchdata.str == '') {
          this.searchdata.Stations = this.Stations
          this.searchdata.ChargeCar = this.ChargeCar
          this.searchfalg = false
        } else {
          let ChargeCar = this.ChargeCar.filter((f) => {
            return (
              f.gtel.indexOf(this.searchdata.str) >= 0 ||
              f.mc.indexOf(this.searchdata.str) >= 0
            )
          })

          let Stations = new Set()
          ChargeCar.forEach((e) => {
            let dqStations = this.Stations.find((f) => {
              return f.id == e.pcs
            })
            if (dqStations) {
              Stations.add(dqStations)
            }
          })
          const s = new Set()

          await Stations.forEach(async (e) => {
            let datas = await this.Stationstfn(e)
            s.add(e)
            datas.forEach((fe) => {
              s.add(fe)
            })
          })
          const array = Array.from(s)

          this.searchdata.Stations = array
          this.searchdata.ChargeCar = ChargeCar
          this.searchfalg = true

          if (ChargeCar.length == 1) {
            this.$emit('setChargeCar', ChargeCar)
          }
        }
      },
      Stationstfn(Station, Stations = [], callback) {
        let promise
        if (typeof callback !== 'function') {
          promise = new Promise((resolve, reject) => {
            callback = function (resolvedata, rejectdata) {
              if (resolvedata) {
                resolve(resolvedata)
              } else {
                reject(rejectdata)
              }
            }
          })
        }
        let data = this.Stations.find((f) => {
          return f.id == Station.pid
        })
        if (data) {
          Stations.push(data)
          this.Stationstfn(data, Stations, callback)
        } else {
          callback(Stations)
        }
        return promise
      },
      setactiveChargeCarfn(items) {
        if (this.activeChargeCar.has(items)) {
          this.activeChargeCar.delete(items)
        } else {
          this.activeChargeCar.add(items)
        }
        this.$emit('setChargeCar', Array.from(this.activeChargeCar))
      },
      oneChargeCarfn(item) {
        this.activeChargeCar.clear()
        this.activeChargeCar.add(item)
        this.$emit('setChargeCar', Array.from(this.activeChargeCar))
      },
    },
  }
</script>
<style lang="scss" scoped>
  .ssbox {
    display: flex;
    padding-bottom: 20px;
  }
</style>
